<template>
	<div>
		<workflow
			ref="workflow"
			@getNodeData = "getData"
			:width = 1200
			:height = 400
			:nodeId = "nodeId"
		>
		<!-- 自己控制显示的内容 -->
		<div slot="operate">
			<h2>左边操作区</h2>
			<button type="primary" @click="addNode('节点','type1')">添加节点</button>
		</div>
		<template slot-scope = "nodesData">
			<div class="j-node"
				v-for="(item,index) in nodesData.data"
				:id="nodeId+item.id"
				:style="{left:(((index%6)*200)+50)+'px',top:(Math.floor((index/6))*100+10)+'px'}"
				@mouseenter="nodeEnter(index)"
				@mouseleave="nodeLeave"
				@click="nodeClick(index)"
				:class="[clickIndex == index?'active':'']"
				>
				{{item.name}}
				<span v-show="selectIndex==index" style="margin-right: 10px;" class="del" @click="nodeRemove(item.id)">X</span>
			</div>
		</template>
		<template slot-scope="selfData" slot="selectData">
			<int :data="selfData.selectData"></int>
			<!-- <float :data="selfData.selectData"></float> -->
		</template>
		</workflow>
	</div>
</template>

<script>
	import workflow from './plumb.vue'
	import int from './int.vue'
	import float from './float.vue'
	export default {
		data() {
			return {
					selectIndex:-1,
					clickIndex:-1,
					selectData:{},
					active:'active',
					spanel:'spanel',
					nodeId:'jNode'
			};
		},
		components:{workflow,int,float},
		methods:{
			// 获取子组件的数据
			getData(params){
				console.log(params)//输出子组件的值
			},
			// 添加节点
			addNode(name,type){
				this.$refs.workflow.addNode(name,type);
			},
			// 删除节点
			nodeRemove(e){
				this.$refs.workflow.nodeRemove(e);
			},
			//hover事件
			nodeEnter(index){
				this.selectIndex = index
			},
			nodeLeave(){
				this.selectIndex = -1
			},
			nodeClick(index){
				this.clickIndex = index
				this.$refs.workflow.nodeClick(index);
			},
		}
	}
</script>

<style>
	.spanel{
		width: 100px;
		color: red;
	}
</style>
